<template>
    <div class="plan-area-view">

        <div style="display: flex;align-items: center;margin-bottom: 20px">
            <el-button class="main-btn" size="small" type="primary" @click="onAdd">添加地区</el-button>
            <el-button class="main-btn" size="small" type="primary" @click="allDelete">全部删除</el-button>
            <el-button class="main-btn" size="small" type="primary" @click="allSet">批量设置开发数量</el-button>
        </div>

        <el-table :data="tableData" border header-cell-class-name="table-header">
            <el-table-column label="序号" type="index" width="55"/>
            <el-table-column align="center" header-align="center" label="规划招商地区" min-width="150">
                <template #default="scope">

                    <el-cascader
                            v-if="scope.row.isEdit"
                            v-model="scope.row.area"
                            :props="props1"
                            placeholder="请选择规划招商地区"
                            style="width: 100%;"
                            @change="(val) => {areaChange(val,scope.row,scope.$index)}"
                    />

                    <span v-else>{{ scope.row.name }}</span>

                </template>
            </el-table-column>
            <el-table-column align="center" header-align="center" label="规划开发终端数量" width="150">
                <template #default="scope">

                    <div style="display: flex">
                        <el-input v-model.number="scope.row.devTerminalNum" v-if="scope.row.isEdit"/>
                        <span v-else>{{scope.row.devTerminalNum}}</span>
                        <span style="margin-left: 10px">家</span>
                    </div>

                </template>
            </el-table-column>
            <el-table-column align="center" header-align="center" label="其他说明" min-width="150">
                <template #default="scope">
                    <el-input v-if="scope.row.isEdit" v-model="scope.row.remark" placeholder="请输入其他说明"/>

                    <div v-else>
                        {{ scope.row.remark }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" header-align="center" label="操作">
                <template #default="scope">
                    <el-button v-if="!scope.row.isEdit" type="text" @click="onEdit(scope.row)">编辑</el-button>
                    <el-button v-else type="text" @click="onConfirm(scope.row)">完成</el-button>
                    <el-button type="text" @click="onDelete(scope)">移除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <sellNumDialog ref="sellNumDialog" @success="setNum"/>

    </div>
</template>

<script>
    import sellNumDialog from './sellNumDialog.vue'
    import {computed, defineComponent, getCurrentInstance, onMounted, reactive, toRefs, inject} from 'vue'

    export default defineComponent({
        name: 'AreaView',
        components: {sellNumDialog},
        props: {
            list: {
                type: Array,
                default: []
            },
            area: {
                type: Array,
                default: []
            },
            datas: {
                type: Object,
                default: {}
            },
            deletes: {
                type: Array,
                default: []
            }
        },
        setup(props, {emit}) {
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const props1 = reactive({
                expandTrigger: 'hover',
                label: 'regionName',
                value: 'regionCode',
                lazy: true,
                lazyLoad(node, resolve) {
                    const { level } = node
                    if (!level){
                        resolve(props.area)
                    }else if (level == 1) {
                        api.common.GET_SYS_REGION_STREET(node.value).then(res=>{
                            if (!res.code){
                                res.data.forEach(a=>{
                                    a.leaf = true
                                })
                                data.streets = res.data
                                resolve(res.data)
                            }
                        })
                    }
                },
            })
            var data = reactive({
                selects: [],
                row: {},
                sellNumDialog: null,
                streets:[],
            })

            onMounted(() => {

            })

            var tableData = computed({
                get() {
                    return props.list
                },
                set(val) {
                    emit('update:list', val)
                    return val
                }
            })

            var citys = computed({
                get() {
                    const arr = checkDisableArea(props.area)
                    return arr
                }
            })

            const editNum = (row) => {
                data.row = row
                data.sellNumDialog.open(row)
            }

            const onDelete = (scope) => {
                if (scope.row.id) {
                    props.deletes.push(scope.row.id)
                }

                tableData.value.splice(scope.$index, 1)
                checkSelects()
            }

            const onConfirm = (row) => {
                row.isEdit = false
            }

            const allSet = () => {
                if (!tableData.value.length){
                    currentInstance.proxy.customMessage({ type: 'error', message: '请添加规划地区' })
                    return
                }
                data.sellNumDialog.openDialog()
            }

            const setNum = (val) => {
                tableData.value.forEach(a=>{
                    a.devTerminalNum = Number(val)
                })
            }

            const onEdit = (row) => {
                row.isEdit = true
            }

            const onAdd = () => {
                console.log(props.datas.region[0])
                if (!props.datas.region || !props.datas.region.length){
                    currentInstance.proxy.customMessage({ type: 'error', message: '请选择地区' })
                    return
                }
                const a = {
                    isEdit: true,
                    name: '',
                    areaCode: '',
                    provinceCode: props.datas.region[0].parentId + '',
                    cityCode: props.datas.region[0].regionCode,
                    streetCode:0,
                    isIncrease: '1',
                    minSaleUnit: '1',
                    devTerminalNum:'',
                }
                tableData.value.push(a)
            }

            const allDelete = () => {
                const arr = []
                for (let i = 0; i < tableData.value.length; i++) {
                    if (tableData.value[i].id) {
                        arr.push(tableData.value[i].id)
                    }
                }
                props.deletes = props.deletes.concat(arr)
                data.selects = []
                tableData.value = []
                checkSelects()
            }

            const getArea = () => {
                const arr = checkDisableArea(props.area)
                return arr
            }

            const checkDisableArea = (list) => {
                const arr = []
                for (let i = 0; i < list.length; i++) {
                    const a = {...list[i]}
                    a.disabled = data.selects.findIndex(area => area == a.regionCode) != -1
                    // if (a.disabled) {
                    //   a.children = null
                    // }
                    if (a.children) {
                        a.children = checkDisableArea(a.children)
                    }

                    arr.push(a)
                }
                return arr
            }

            const checkSelects = () => {
                data.selects = []
                for (let i = 0; i < tableData.value.length; i++) {
                    const a = tableData.value[i]
                    if (a.streetCode){
                        data.selects.push(a.streetCode)
                    } else if (a.areaCode) {
                        data.selects.push(a.areaCode)
                    } else if (a.cityCode) {
                        data.selects.push(a.cityCode)
                    } else if (a.provinceCode) {
                        data.selects.push(a.provinceCode)
                    }
                }
            }

            const areaChange = (val, row, index) => {
                let name = ''
                const area = props.area[props.area.findIndex(a => a.regionCode == val[0])]
                let street = {}
                if (!checkSelectArea(val, index)) {
                    let areaList = []
                    if (row.areaCode) {
                        areaList.push(row.areaCode)
                    }
                    if (row.streetCode) {
                        areaList.push(row.streetCode)
                    }
                    row.area = areaList
                    return;
                }
                if (val.length == 1) {
                    name = area.regionName
                } else if (val.length == 2) {
                    street = data.streets[data.streets.findIndex(a => a.regionCode == val[1])]
                    name = area.regionName + '/' + street.regionName
                }
                console.log(street)
                row.areaCode = area.regionCode
                row.streetCode = street.regionCode ? street.regionCode : ''
                row.name = name

                checkSelects()
            }

            const checkSelectArea = (val, index) => {
                console.log(val)
                console.log(data.selects)
                let bo = true;
                let x = data.selects.findIndex(a => a == val[val.length-1])
                if (x != -1){
                    currentInstance.proxy.customMessage({type: 'error', message: '当前区域已被选择'})
                    bo = false
                }
                return bo
            }

            return {
                ...toRefs(data),
                tableData,
                citys,
                props1,

                onDelete,
                onAdd,
                allDelete,
                onEdit,
                areaChange,
                getArea,
                onConfirm,
                editNum,
                allSet,
                setNum,
            }
        }
    })
</script>

<style scoped>

</style>
